<template>
  <div class="publicSubscribe-container" v-loading="publicSubscribeLoading">
    <Breadcrumb></Breadcrumb>
    <PageLayout>
      <div class="table-container height-100">
        <div class="flex-justify-between">
          <p class="small-title">基础信息</p>
          <el-button type="primary" size="small" @click="toEdit">编辑</el-button>
        </div>

        <el-form :ref="publicSubscribeFormRef" :model="publicSubscribeForm"
                 size="small" label-width="90px" inline>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item :label="`${formatName}名称：`">
                <div class="width-300">{{publicSubscribeForm.name}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实现版本：">
                <div class="width-300">{{publicSubscribeForm.version}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实体类型：">
                <div class="width-300">{{formatType(entityType_asset, publicSubscribeForm.entityType)}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="type==='ATTRIBUTE'">
              <el-form-item label="属性归属：">
                <div class="width-300">{{formatType(attributeOriginType, publicSubscribeForm.attributeOrigin)}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="type!=='ATTRIBUTE'">
              <el-form-item label="Method：">
                <div class="width-300">{{publicSubscribeForm.method}}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注：">
                <div class="width-300">{{publicSubscribeForm.remarks || '--'}}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <p class="small-title">参数配置</p>
        <JsonSchemaDetail title="请求参数" :schema="publicSubscribeForm.requestSchema"></JsonSchemaDetail>
        <JsonSchemaDetail title="响应参数" :schema="publicSubscribeForm.responseSchema"></JsonSchemaDetail>
      </div>
    </PageLayout>
  </div>
</template>
<script>
  import {attributeOriginType, entityType_asset} from "@/config/common";
  import {messageHandle} from "@/utils";
  import {msgCode} from "@/config/string";
  import JsonSchemaDetail from "@/page/assetManagement/partial/JsonSchemaDetail.vue";
  import {routerMeta} from "@/router/routerMeta";

  export default {
    name: "PublicSubscribeDetail",
    data() {
      return {
        publicSubscribeLoading: false,
        publicSubscribeForm: {
          name: '',
          entityType: 'AREA',
          version: '',
          attributeOrigin: 'CLIENT',
          requestSchema: {},
          responseSchema: {},
          remarks: '',
          type: 'ATTRIBUTE'
        },
        publicSubscribeFormRef: 'publicSubscribeFormRef',
        entityType_asset,
        attributeOriginType,
        type: 'ATTRIBUTE',
      }
    },
    components: {
      JsonSchemaDetail
    },
    computed: {
      formatName() {
        return this.$route.params.type === 'ATTRIBUTE' ? '属性' : this.$route.params.type === 'EVENT' ? '事件' : '服务'
      }
    },
    mounted() {
      this.init()
    },
    watch: {
      '$route'(to, from) {
        this.init()
      }
    },
    methods: {
      init() {
        this.publicSubscribeForm.type = this.$route.params.type;
        this.type = this.$route.params.type;
        if (this.$route.params.id) {
          this.getDetailData(this.$route.params.id);
        }
        this.isEdit = this.$route.path.includes('/edit');
      },
      getDetailData(id) {
        this.publicSubscribeFormLoading = true;
        API.platformMessage.platformMessageDetail({_id: id}).then(result => {
          if (result.data) {
            this.publicSubscribeFormLoading = false;
            this.publicSubscribeForm = result.data
          }

        })
      },
      formatType(data, value) {
        const attributeType = data.find(type => type.value === value) || {};
        return attributeType.label || '--'
      },
      toEdit() {
        switch (this.publicSubscribeForm.type) {
          case 'ATTRIBUTE':
            this.$router.push({name: routerMeta.attributeEdit.name})
            break;
          case 'EVENT':
            this.$router.push({name: routerMeta.eventsEdit.name})
            break;
          case 'SERVICE':
            this.$router.push({name: routerMeta.serviceEdit.name})
            break;
          default:
            break;
        }
      }
    }
  }
</script>


<style scoped lang="less">
  .publicSubscribe-container {
    .small-title {
      font-size: 14px;
      color: #333;
      font-weight: 600;
      margin-top: 0;
      border-left: #2D69E0 solid 4px;
      height: 18px;
      padding-left: 10px;
    }

    .width-300 {
      width: 200px;
    }

    .json-box {

      width: 100%;
      padding: 20px;
      box-sizing: border-box;

      .json-box-item {
        border: 1px solid #DADCE5;

        .json-box-top {
          padding: 2px 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #DADCE5;
        }

        .json-box-bottom {
          padding: 2px 10px;
          box-sizing: border-box;
          min-height: 200px;
          max-height: 300px;
          overflow: auto;
        }
      }

    }
  }
</style>
